<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">

<title>班级页</title>
<script src="/static/js/jquery-3.6.4.js"></script>
<link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<h1 style="text-align: center;">{{class_name}}</h1>
<table id="mytab" class="pure-table">
	<thead>
		<th colspan="9"> <span text-align="center">老师的位置</span> </th>
	</thead>
	<tbody>
            <tr>
                <td>
                    <span id="span11">第1行第1列</span>
                </td>
                <td>
                    <span id="span12">第1行第2列</span>
                </td>
                <td>
                    <span id="span13">第1行第3列</span>
                </td>
                <td>
                    <span id="span14">第1行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span id="span15">第1行第5列</span>
                </td>
                <td>
                    <span id="span16">第1行第6列</span>
                </td>
                <td>
                    <span id="span17">第1行第7列</span>
                </td>
                <td>
                    <span id="span18">第1行第8列</span>
                </td>                
            </tr>

            <tr>
                <td>
                    <span id="span21">第2行第1列</span>
                </td>
                <td>
                    <span id="span22">第2行第2列</span>
                </td>
                <td>
                    <span id="span23">第2行第3列</span>
                </td>
                <td>
                    <span id="span24">第2行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span id="span25">第2行第5列</span>
                </td>
                <td>
                    <span id="span26">第2行第6列</span>
                </td>
                <td>
                    <span id="span27">第2行第7列</span>
                </td>
                <td>
                    <span id="span28">第2行第8列</span>
                </td>                
            </tr>

            <tr>
                <td>
                    <span id="span31">第3行第1列</span>
                </td>
                <td>
                    <span id="span32">第3行第2列</span>
                </td>
                <td>
                    <span id="span33">第3行第3列</span>
                </td>
                <td>
                    <span id="span34">第3行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span id="span35">第3行第5列</span>
                </td>
                <td>
                    <span id="span36">第3行第6列</span>
                </td>
                <td>
                    <span id="span37">第3行第7列</span>
                </td>
                <td>
                    <span id="span38">第3行第8列</span>
                </td>                
            </tr>

            <tr>
                <td>
                    <span  id="span41">第4行第1列</span>
                </td>
                <td>
                    <span  id="span42">第4行第2列</span>
                </td>
                <td>
                    <span  id="span43">第4行第3列</span>
                </td>
                <td>
                    <span  id="span44">第4行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span  id="span45">第4行第5列</span>
                </td>
                <td>
                    <span id="span46">第4行第6列</span>
                </td>
                <td>
                    <span id="span47">第4行第7列</span>
                </td>
                <td>
                    <span id="span48">第4行第8列</span>
                </td>                
            </tr>

            <tr>
                <td>
                    <span id="span51">第5行第1列</span>
                </td>
                <td>
                    <span id="span52">第5行第2列</span>
                </td>
                <td>
                    <span id="span53">第5行第3列</span>
                </td>
                <td>
                    <span id="span54">第5行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span  id="span55">第5行第5列</span>
                </td>
                <td>
                    <span  id="span56">第5行第6列</span>
                </td>
                <td>
                    <span  id="span57">第5行第7列</span>
                </td>
                <td>
                    <span  id="span58">第5行第8列</span>
                </td>                
            </tr>

            <tr>
                <td>
                    <span  id="span61">第6行第1列</span>
                </td>
                <td>
                    <span  id="span62">第6行第2列</span>
                </td>
                <td>
                    <span id="span63">第6行第3列</span>
                </td>
                <td>
                    <span id="span64">第6行第4列</span>
                </td>
                <td>
                    <span>中间空列</span>
                </td>
                <td>
                    <span id="span65">第6行第5列</span>
                </td>
                <td>
                    <span id="span66">第6行第6列</span>
                </td>
                <td>
                    <span id="span67">第6行第7列</span>
                </td>
                <td>
                    <span id="span68">第6行第8列</span>
                </td>                
            </tr>
	</tbody>
</table>

<div id="gotoload">

</div>
</body>
<script>
/*
JQuery最优加载方式
*/
$(function(){
	//开始写我的代码
	$.get("/api/zuowei",  function(jsonStr){
        jsonData=JSON.parse(jsonStr);
        //console.log(typeof(jsonData));
        /**for(var i=0;i<jsonData.length;i++){
            oneData=jsonData[i]
            console.log(oneData)
        }**/
        $("#mytab >tbody>tr>td>span").text("")
        $.each(jsonData,function(index,oneData){
            if(oneData.x==0&&oneData.y==0){
                $("#mytab >thead>tr>th>span").text(oneData.ipadr)
            }else{
                $("#span"+oneData.x+""+oneData.y).text(oneData.ipadr)
            }
        });
	});

});


function 传统过滤99(arr){
	var result=[];

	for(var i=0;i<arr.length;i++){
		if(arr[i].id==99){
			result.push(arr[i]);
		}
	}

	arr.forEach(element => {
		if(element.id==99){
			result.push(element);
		}
	});

	return result;
}


function 普通判断(num){
	if(num>50){
		return true;
	}else{
		return false;
	}

}
function 三元运算(num){
	return num>50?true:false;
}

</script>
</html>
